<template>
	<view class="login-index">
		<view class="logo">
			<view class="img">
				LOGO
			</view>
			<view class="text">医兼APP</view>
		</view>
		<view class="top">
			<view class="left"></view>
			<view class="right"></view>
		</view>
		<view class="main">
			<view class="account" @click="handleClickAccountLogin">账号登录</view>
			<view class="code" @click="handleClickCodeLogin">验证码登录</view>
		</view>
		<view class="bottom">
			<view class="order">
				<u-divider text="其他方式登录"></u-divider>
				<image @click="handleClickOrderLogin" src="@/static/images/wechat-logo.png" />
			</view>
			<loginAgreement :chooes="agreement_chooes" @choose="(e)=>agreement_chooes=e"></loginAgreement>
		</view>
	</view>
</template>

<script>
	import loginAgreement from './components/loginAgreement.vue';
	export default {
		components: {
			loginAgreement
		},
		data() {
			return {
				//已阅读并同意
				agreement_chooes: true
			}
		},
		methods: {
			/**
			 * 账号登录
			 */
			handleClickAccountLogin() {
				console.log("账号登录");
				this.goto('pages/public/accountLogin')
			},
			/**
			 * 验证码登录
			 */
			handleClickCodeLogin() {
				console.log("验证码登录");
				this.goto('pages/public/codeLogin')
			},
			/**
			 * 其他方式登录
			 */
			handleClickOrderLogin() {
				console.log("其他方式登录");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-index {
		width: 100%;

		.logo {
			position: absolute;
			left: 228rpx;
			top: 308rpx;
			width: 294rpx;
			height: 274rpx;

			.img {
				margin: 0 auto;
				width: 164rpx;
				height: 164rpx;
				line-height: 164rpx;
				background: $theme-color;
				text-align: center;
				color: #FFF;
				font-weight: bold;
				font-size: 48rpx;
				border-radius: 20rpx;
			}

			.text {
				margin-top: 16rpx;
				font-size: 72rpx;
				color: #000;
			}
		}

		.top {
			height: 428rpx;
			display: flex;

			.left {
				background: linear-gradient(155deg, rgba(185, 238, 222, 1) 0%, rgba(182, 237, 245, 0) 80%);
				height: 100%;
				width: 50%;
			}

			.right {
				background: linear-gradient(205deg, rgba(182, 237, 245, 1) 0%, rgba(185, 238, 222, 0) 80%);
				height: 100%;
				width: 50%;
			}
		}

		.main {
			margin-top: 390rpx;


			.account {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 335px;
				height: 44px;
				background: $theme-color;
				margin: 0 auto;
				text-align: center;
				border-radius: 24rpx;
				color: #FFF;
				font-size: 32rpx;
			}

			.code {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 335px;
				height: 44px;
				margin: 40rpx auto 0;
				text-align: center;
				color: #FFF;
				border-radius: 24rpx;
				background: rgba(76, 212, 230, 1);
				font-size: 32rpx;
			}
		}
	}
	
	.bottom{
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		
		.order {
			margin: 80rpx 0 128rpx 0;
			width: 335px;
			text-align: center;
		
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>